<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Order History</title>
    <link rel="StyleSheet" th:href="@{/css/jpetstore.css}" type="text/css" media="screen"/>
</head>
<body>
<header th:replace="common/top"></header>

<div id="Content">

    <div id="BackLink">
        <!-- 此处的href的链接对应的是controller中的方法 -->
        <a href="/catalog/view">Return to Main Menu</a>
    </div>

    <h2>Order History</h2>

    <div th:if="${#lists.isEmpty(orderList)}" class="EmptyMessage">
        You have no orders.
    </div>

    <table th:unless="${#lists.isEmpty(orderList)}" class="OrderList">
        <tr>
            <th>Order ID</th>
            <th>Date</th>
            <th>Total Amount</th>
            <th>Details</th>
        </tr>
        <tr th:each="order : ${orderList}">
            <td th:text="${order.orderId}"></td>
            <td th:text="${#dates.format(order.orderDate, 'yyyy-MM-dd HH:mm')}"></td>
            <td th:text="${#numbers.formatCurrency(order.totalPrice)}"></td>
            <td>
                <a th:href="@{/order/view/{orderId}(orderId=${order.orderId})}">View</a>
            </td>
        </tr>
    </table>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>